<template>
    <div id="app">
      <el-form ref="booForm" :model="book" label-width="80px"  :rules="yzgz">
        <el-form-item label="图书名称"prop="name" >
          <el-input v-model="book.name"></el-input>
        </el-form-item>
        <el-form-item label="图书作者"prop="author">
          <el-input v-model="book.author"></el-input>
        </el-form-item>
        <el-form-item label="图书价格" prop="price">
<!--          验证数字是需要添加.number-->
          <el-input v-model.number="book.price"></el-input>
        </el-form-item>

        <el-form-item >
          <el-button type="primary" @click="addBook">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
export default {
  name: "addBook",
    data(){
    return {
      book:{

      },
      //定义验证规则
      yzgz:{
      name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
      author:[{required:true,message:"作者不能为空",trigger:"blur"}],
      price:[{required:true,type:"number",min:0,message:"价格必须大于0的数字",trigger:"blur"}]
    }
    }
    },
  methods:{
    addBook(){
      this.$refs["booForm"].validate((valid)=>{
        if(valid){
          //发出axios请求
      this.axios.post("books",this.book)
      .then((resp)=>{
        //提示用户添加成功
        this.$message.success("添加成功");
        //路由跳转
        this.$router.push("/myTable");
      });
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
